<!-- demo注册界面，利用Ajax进行判断手机号是否已经注册过 -->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>demo_register</title>
	
	<!-- h-ui样式表 -->
	<link href="css/h-ui/H-ui.css" rel="stylesheet" type="text/css" />
	<link href="css/h-ui/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
	<div id="container" class="text-c">
		<!-- 内容居中对齐，块居中对齐 -->
		<div id="login_page">
			<h1>
				<strong>注册新账号</strong>
			</h1>
			
			<!-- 上传表单 name和password,mobile -->
			<form action="demo_registerAction.do" method="post">
				<div class="mt-20">
					<div class="f-l" style="height: 10px; width: 100px">
						<span class="f-16">手机号: </span>
					</div>
					<div class="f-l" style="height: 10px; width: 250px">
						<input id="mb" class="input-text radius" type="text" name="mobile"
							placeholder="11位数字" autofocus required />
					</div>
					<br>
				</div>
				<div class="mt-20">
					<span id="mobile_text">&nbsp;</span>
				</div>
				<div class="mt-20">
					<div class="f-l" style="height: 10px; width: 100px">
						<span class="f-16">昵称: </span>
					</div>
					<div class="f-l" style="height: 10px; width: 250px">
						<input class="input-text radius" type="text" name="name"
							placeholder="4-10个字母，数字或下划线" id="nm" required />
					</div>
					<br />
				</div>
				<div class="mt-20">
					<div class="f-l" style="height: 10px; width: 100px">
						<span class="f-16">密码: </span>
					</div>
					<div class="f-l" style="height: 10px; width: 250px">
						<input class="input-text radius" type="password" name="password"
							placeholder="请输入密码" id="pw1" required />
					</div>
					<br />
				</div>
				<div class="mt-20">
					<div class="f-l" style="height: 10px; width: 100px">
						<span class="f-16">确认密码: </span>
					</div>
					<div class="f-l" style="height: 10px; width: 250px">
						<input class="input-text radius" type="password"
							placeholder="请确认密码" id="pw2" required />
					</div>
					<br />
				</div>
				<div class="mt-20">
					<p class="f-24">
						<input class="radius btn-primary" type="submit" value="立即注册" style="width: 200px; height: 30px" onclick="return check()">
					</p>
				</div>
			</form>
		</div>
		
		
		<!-- 引用JQuery框架 -->
		<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
	
		<script type="text/javascript">
			$(function(){
		        $("#mb").blur(function(){
		            var mb=$("input[name='mobile']").val(); //获得指定元素
		            if(mb.length == 11){
		            	$.ajax({
			                url:'demo_ajaxRegisterAction.action',
			                data:{
			                	mobile : mb
			                	},
			                type:'post',
			                dataType:'json', //设置需要返回的数据类型 
			                success : function(data) {
			                	var result = eval("("+data+")");//将数据转换成json类型
			                	if(result.isExistMobile == true){
			                		$("#mobile_text").text("该手机号已经注册过");
			                	}else{
			                		$("#mobile_text").text("该手机号尚未注册过");
			                	}
			                },
			            });
		            }else{
		            	$("#mobile_text").text("请输入正确的手机号格式");
		            }  
		        });
		    });
		</script>
		<!-- 防止输入为空 -->
		<script type="text/javascript">
		//防止最终输入内容有些为空
			function check() {
				var nm = document.getElementById("nm").value;
				var mb = document.getElementById("mb").value;
				var pw1 = document.getElementById("pw1").value;
				var pw2 = document.getElementById("pw2").value;
				if (nm == "" || mb == ""|| pw1 == "" || pw2 == "") {
					window.alert("用户手机号、昵称、密码不能为空");
					return false;
				} else {
					if (pw1 == pw2) {
						return true;
					} else {
						window.alert("两次密码输入不一样");
						return false;
					}
				}
			}
		</script>
	</div>
</body>
</html>